<template>
  <el-row class="rowI" style="margin-top: 100px">
    <el-col :span="20">
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">姓名 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="patient.nickname" class="colInput" disabled/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">就诊卡号 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="patient.number" class="colInput" disabled/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">手机号码 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="patient.mobile" class="colInput" disabled/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">年龄 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="patient.age" class="colInput" disabled/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">性别 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="patient.gender" class="colInput" placeholder="请选择" disabled>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">民族 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="patient.ethnicGroup" class="colInput" placeholder="请选择" disabled>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">是否有遗传病史 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="patient.isGenetic" class="colInput" placeholder="请选择" disabled>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">状态 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="patient.status" class="colInput" placeholder="请选择" disabled>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">证件类型 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="patient.documents" class="colInput" placeholder="请选择" disabled>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">证件号码 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="patient.idNumber" class="colInput" disabled/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">出生年月 :</div>
            </el-col>
            <el-col :span="14">
              <el-date-picker v-model="patient.birthday" type="date"
                              placeholder="请选择" format="YYYY-MM-DD"
                              disabled/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">婚姻情况 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="patient.maritalStatus" class="colInput" placeholder="请选择" disabled>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="4">
          <div style="margin-left: 185px;width: 100px;line-height: 30px">通讯地址 :</div>
        </el-col>
        <el-col :span="20">
          <el-input v-model="patient.address" style="width: 745px;margin-left: -255px" disabled/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">操作人员 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="patient.createUser" class="colInput" placeholder="自动获取操作人员" disabled/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">创建时间 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="patient.gmtCreate" class="colInput" placeholder="自动获取操作时间" disabled/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="4">
      <div style="width: 100%;height: 100%;margin-left: -300px">
        <img src="https://demo2022.axureshop.com/2201312/images/%E6%82%A3%E8%80%85%E7%AE%A1%E7%90%86/u1990.svg"
             style="padding-top: 10px" alt="人物头像"/>
      </div>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="4">
      <div class="textDiv">备注 :</div>
    </el-col>
    <el-col :span="20">
      <el-input v-model="patient.remark" type="textarea" :rows="4" class="textInput" disabled/>
    </el-col>
  </el-row>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);

onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;
  if (location.search.includes('id')) {
    let id = new URLSearchParams(location.search).get('id');
    axios.get(BASE_URL + '/v1/patients/' + id + '/select').then((response) => {
      if (response.data.code === 20000) {
        patient.value = response.data.data;
      }
    })
  }
})
const patient = ref({})
</script>


<style scoped>
/deep/ .el-date-editor {
  margin-left: -90px;
  --el-date-editor-width: 300px;
}

.textDiv {
  margin-left: 170px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}

.textInput {
  width: 1030px;
  margin-left: -280px
}

.colInput {
  margin-right: 360px;
  width: 300px
}

.rowI {
  margin-bottom: 20px
}

.divLeft {
  width: 270px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divRight {
  margin-left: -35px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: right
}
</style>
